import {createApp,watch} from 'vue';
import MyMessageBoxComponent from './MyMessagebox.vue';
function MyMessageBox (options) {
    // 组件名，组件属性
    const messageBoxApp = createApp(MyMessageBoxComponent,options)
    showMessageBox(messageBoxApp,{
        confirm: options.confirm,
        cancel: options.cancel
    })
}
// 在 Vue 3 中，createApp 函数返回一个应用实例，这个实例提供了挂载、全局 API 访问、插件使用等能力。
// .mount() 方法是 Vue 3 中新引入的，用于将应用挂载到 DOM 元素上。

function showMessageBox(app,{confirm,cancel}) {
    const oFragement = document.createDocumentFragment()
    // const div = document.createElement('div')
    // document.body.appendChild(div)
    // 挂载组件
   const vm = app.mount(oFragement)
   document.body.appendChild(oFragement)

//    console.log(vm);
   vm.setVisible(true)

   watch(vm.state, (state) => {
   
        if (!state.visible) {
            console.log(state.type);
            switch (state.type) {
                case 'CONFIRM':
                    console.log('CONFIRM');
                    console.log(state);
                    typeof confirm === 'function' && confirm()
                    // vm.$emit('confirm')
                    break;
                case 'CANCEL':  
                    console.log('cancel');
                    typeof cancel === 'function' && cancel()
                    // vm.$emit('cancel')
                    break;
                default:
                    break;
            }
            hiddeMessagebox(app)
        }
    })
}
function hiddeMessagebox(app) {
    app.unmount()
    // app.destroy()
}
export default MyMessageBox